<template>
<div class="head">
    <div class="search">
        <div class="searchInput">
            <input type="text" placeholder="搜索影片." v-model="search.value" @keydown.enter="handleClickOrEnter" />
            <ul class="searchList" v-if="search.result.length > 0">
                <li v-for="item in search.result" :key="item.id">
                    <router-link :to="`/detail/${item.id}`">{{item.movie_name}}</router-link>
                </li>
            </ul>
        </div>
        <button @click="handleClickOrEnter">搜索</button>
    </div>
    <ul class="category">
        <li v-for="(item, index) in state.category" :key="index">
            <a href="#" @click.prevent="toggleCurrent($event, item)" :class="item === state.currentCate && 'active'">{{item}}</a>
        </li>
    </ul>
</div>
</template>

<script>
import {
    defineComponent,
    watch,
    reactive,
    inject
} from "vue";
import store from "../store";
import {
    getCategoryMovie,
    getSearchMovie
} from "../utils/fetchData"
export default defineComponent({
    name: "head",
    setup() {
        const state = inject(store.stateProvide)
        const search = reactive({
            value: "",
            result: [],
            count: 0
        })
        // 侦听current变动:
        watcherCurrent(state)
        //侦听searckKey变动
        watcherSearchKey(search)
        // 切换当前数据:
        const toggleCurrent = (event, current) => {
            if (state.isSearch) {
                state.isSearch = false;
                state.searchKey = ""
            }
            state.currentCate = current;
        }
        const handleClickOrEnter = () => {
            toggleSearchData(state, search)
        }
        return {
            state,
            search,
            toggleCurrent,
            handleClickOrEnter
        }
    }
})
// 侦听current变化
function watcherCurrent(state) {
    watch(
        () => state.currentCate,
        (current) => {
            returnHome()
            // 获取数据:
            getCategoryMovie(current, state, false)
            state.currentPage = 1;
            // 判断是否需要清空搜索相关数据
            if (state.isSearch && current !== "") {
                state.isSearch = false;
                state.searchKey = "";
            }
        }, {
            immediate: true
        }
    )
}
// 侦听searchKey变化:
function watcherSearchKey(search) {
    watch(
        () => search.value,
        (key) => {
            // 加载搜索数据:
            getSearchMovie(key, search, false)
        }
    )
}
// 搜索数据切换:
function toggleSearchData(state, search) {
    // 将search中搜索得到的数据同步到state中，同时清除search中的数据
    if (search.result.length > 0) {
        returnHome()
        // 处理搜索电影数据的去重操作
        state.movieId.clear();
        search.result.forEach(item => {
            state.movieId.add(item.id)
        })
        state.movieList = search.result;
        state.isSearch = true;
        state.searchKey = search.value;
        state.count = search.count;
        state.currentCate = "";
    }
    search.value = "";
    search.result = [];
    search.count = 0;
}

// 检测当前所在页面，如果不是home页，当查询数据时需要强制返回home页
function returnHome() {
    let hash = window.location.hash;
    if (hash !== "/") {
        window.location.hash = "/"
    }
}
</script>

<style lang="scss">
@import "@/assets/styles/componentStyle/head.scss";
</style>
